<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<script type="text/html" id="tableToolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="table-add"> 添加</button>
			</div>
		</script>

		<script type="text/html" id="tableItemContent">
			<div style="margin: 10px 10px;text-align: center;">
				<form class="layui-form layui-form-pane" lay-filter="table-data-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">座位类型</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="cabin_id" id="cabin_id">
									<option>请选择</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">销售价格</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" name="basic_price" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">折扣</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" name="discount" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">总数</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" name="ticket_count" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">余量</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" name="remaining_tickets" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">行李限数</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" name="luggage_limit" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">改退签规则</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" name="rules" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>

					<div class="layui-form-item" style="margin-top: 10px;">
						<div class="layui-inline">
							<a class="layui-btn layui-btn-primary" lay-submit lay-filter="table-data-ok-btn">确定 </a>
						</div>
					</div>
				</form>
			</div>
		</script>

		<table class="layui-hide" id="tableCurrentTableId" lay-filter="tableCurrentTableFilter"></table>

		<script type="text/html" id="tableCurrentTableBar">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="table-edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="table-delete">删除</a>
		</script>

	</div>

</div>

<script>
	layui.use(['form', 'table', 'element'], function () {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table;

		var cMap = {};
		$.ajax({
			url: "/api/Cabin",
			type: "GET",
			dataType: "json",
			async: false,
			success: function (res) {
				if (res.code == 0) {
					layui.each(res.data, function (index,item) {
						cMap[item.id]=item.cabin_class;
					});
				}
			},
		});


		// 'id', 'on_flight_id', 'cabin_id', 'basic_price', 'discount', 'ticket_count',
		// 	'remaining_tickets', 'luggage_limit', 'rules'
		table.render({
			elem: '#tableCurrentTableId',
			url: '/api/TicketType',
			where: {'on_flight_id': toChildVal.ofid},
			toolbar: '#tableToolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [[
				{field: 'id', title: 'ID', sort: true},
				{field: 'cabinName', title: '类型', templet: function (item) {return cMap[item.cabin_id];}},
				{field: 'basic_price', title: '销售价格'},
				{field: 'discount', title: '折扣'},
				{field: 'ticket_count', title: '总数'},
				{field: 'remaining_tickets', title: '余量'},
				{field: 'luggage_limit', title: '行李限数'},
				{field: 'rules', title: '改退签规则'},
				{title: '操作', toolbar: '#tableCurrentTableBar', align: "center"}
			]],
			limits: [10, 20, 50, 100],
			limit: 10,
			page: true
		});

		function editLayer(){
			var index = layer.open({
				title: '编辑',
				type: 1,
				shade: 0.2,
				maxmin: true,
				shadeClose: true,
				area: ['350px', '520px'],
				content: tableItemContent.innerHTML,
			});
			var selectEl1 = $('#cabin_id').empty().append(new Option("请选择", ""));
			$.each(cMap, function(k, v) {
				selectEl1.append(new Option(v, k));
			});
			form.render("select");
			return index;
		}

		// toolbar事件监听
		table.on('toolbar(tableCurrentTableFilter)', function (obj) {
			if (obj.event === 'table-add') {
				var index = editLayer();

				// 监听添加提交
				form.on("submit(table-data-ok-btn)", function (result) {
					var formData = result.field;
					formData['on_flight_id']=toChildVal.ofid;
					$.ajax({
						url: "/api/TicketType",
						data: formData,
						type: "POST",
						dataType: "json",
						success: function (res) {
							layer.close(index); // 关闭add弹出层
							if (res.code == 0) {
								layer.msg("添加成功", {icon: 1, time: 2000});
							} else {
								layer.msg(res.msg, {icon: 2, time: 2000});
							}
							table.reload('tableCurrentTableId');
						},
					});
				});
			}
		});

		//监听单元格工具
		table.on('tool(tableCurrentTableFilter)', function (obj) {
			var data = obj.data;
			if (obj.event === 'table-edit') {

				// ** content
				var index = editLayer();

				form.val('table-data-form', data);

				// 监听修改提交
				form.on("submit(table-data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/TicketType/" + data.id,	// ** url
						data: result.field,
						type: "PUT",
						dataType: "json",
						success: function (res) {
							layer.close(index);
							if (res.code == 0) {
								layer.msg('修改成功！');
							} else {
								layer.msg(res.msg);
							}
							table.reload('tableCurrentTableId');
						}
					});
				});

			} if (obj.event === 'table-delete') {
				// 监听删除操作
				layer.confirm('确认是否删除？', function (index) {

					$.ajax({
						url: "/api/TicketType/" + data.id,
						type: "DELETE",
						dataType: "json",
						success: function (res) {
							if (res.code == 0) {
								obj.del();
								layer.msg('删除成功！');
							} else {
								layer.msg(res.msg);
							}
						}
					});

					layer.close(index);
				});
			}
		});
	});
</script>
